<template>
<div>
	<div class="bigtitle" mgt2>
		<div class="bigtitle-title" sz1>意见反馈</div>
	</div>

	<Form :ref=formRef :model=model :rules=rules :label-width="100" mgt3 style="max-width:500px;">
		<FormItem label="姓名" prop="name">
			<Input v-model=model.name />
		</FormItem>
		<FormItem label="联系电话" prop="phoneNumber">
			<Input v-model=model.phoneNumber />
		</FormItem>
		<FormItem label="电子邮件" prop="emailAddress">
			<Input v-model=model.emailAddress />
		</FormItem>
		<FormItem label="咨询/反馈内容" prop="content">
			<Input v-model=model.content type="textarea" :rows=3 />
		</FormItem>
		<FormItem>
			<Button type="primary" @click=handleFeedback >提交</Button>
		</FormItem>
	</Form>

	<div class="bigtitle" mgt2>
		<div class="bigtitle-title" sz1>最新留言</div>
	</div>
	<div v-for="(item, index) in page.items" :key=index pd2 bdb-gray4>
		<p strong>{{item.content}}</p>
		<p mgt2>{{item.reply || '暂未回复'}}</p>
	</div>

</div>
</template>

<script lang="ts">
import { Component, Vue,Inject, Prop,Watch } from 'vue-property-decorator';
import AbpBase from '../../lib/abpbase'

@Component
export default class Feedback extends AbpBase{
	model:any = this.getDefaultModel()
	formRef:string = this.getRandomRef('feedback')

	get page() {
		return this.$store.state.websiteInfo.feedbackPage;
	}

	get rules() {
		return {
			content: [
				{ required: true, message: '请填写反馈内容', trigger: 'blur' }
			],
			phoneNumber: [
				{ required: true, message: '请填写联系电话', trigger: 'blur' }
			],
			emailAddress: [
                { type: 'email', message: '错误的邮箱格式', trigger: 'blur' }
            ]
		}
	}

	getDefaultModel() {
		return {
			name: '',
			content: '',
			phoneNumber: '',
			emailAddress: ''
		}
	}

	handleFeedback() {
		this.validate(this.formRef, async () => {
			var response = await this.post('Feedback/Create', this.model);
			if(response.success) {
				this.success('提交成功！');
			}
		});
	}

	created() {
		this.page.pageSize(4).getData();
	}

}
</script>
